<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>小黄脸</title>
		<style>
		/* 画圆 */
		#d1{  /* 底色*/
			width: 600px;
			height: 600px;
			border: 5px solid #dcbd7c;
			background-color: #fed952;
			border-radius:50%;
			position: relative;
			left: 290px;
			top:57px;

		}
		#d2{    /* 白色左眼 */
			width: 150px;
			height: 150px;
			border: 4px solid #dcbd7c;
			background-color: #ffffff;
			border-radius:150px 300px;
			transform: rotate(54deg);
			position: relative;
			left: 96px;
			top:165px;
		}
		#d3{    /* 白 右眼*/
			width: 150px;
			height: 150px;
			border: 4px solid #dcbd7c;
			background-color: #ffffff;
			border-radius:150px 300px;
			transform: rotate(-9deg);
			position: relative;
			left: 139px;
			top:-201px;
		}
		#d4{   /*  黑色左眼*/
			width: 100px;
			height:100px;
			background-color: #000000;
			border-radius:176px 352px;
			transform: rotate(-5deg);
			position: relative;
			left: 20px;
			top:48px;
		}
		#d5{   /* 右眼 黑色*/
			width: 100px;
			height:100px;
			background-color: #000000;
			border-radius:176px 352px;
			transform: rotate(4deg);
			position: relative;
			left: -189px;
			top:157px;
		}
		#d6{   /*  脸 腮红*/
			width: 100px;
			height:150px;
			background-color: #ff9f82;
			border-radius:100px 100px;
			transform: rotate(45deg);
			position: relative;
			left: 205px;
			top:-29px;
		}
		/* 嘴 */
		#p1{
			width: 10px;
			height:108px;
			background-color: #ff5500;
			transform: rotate(450deg);
			/* 微调定位 */
			position: relative;
			left: 591px;
			top: -107px;
		}
		</style>
	</head>
	<body>
		<!-- 9个圆 -->
		<div id="d1">
			<div id="d2">
				<div id="d3">
					<div id="d4">
						<div id="d5">
							<div id="d6"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<p id="p1"></p>
	</body>
</html>